<template>
	<a-layout-header :class="[headerTheme, 'admin-header']">
		<div :class="['admin-header-wide', layout, pageWidth]">
			<router-link v-if="isMobile || layout === 'head'" to="/" :class="['logo', isMobile ? null : 'pc', headerTheme]">
				<img width="32" src="@/assets/img/logo.png" />
				<h1 v-if="!isMobile">{{ systemName }}</h1>
			</router-link>
			<a-divider v-if="isMobile" type="vertical" />
			<a-icon v-if="layout !== 'head'" class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse" />
			<div v-if="layout !== 'side' && !isMobile" class="admin-header-menu" :style="`width: ${menuWidth};`">
				<i-menu class="head-menu" :theme="headerTheme" mode="horizontal" :options="menuData" @select="onSelect" />
			</div>
			<div :class="['admin-header-right', headerTheme]">
				<header-search class="header-item" @active="val => (searchActive = val)" />
				<header-notice class="header-item" />
				<header-avatar class="header-item" />
				
			</div>
		</div>
	</a-layout-header>
</template> 

<script>
import HeaderSearch from './HeaderSearch';
import HeaderNotice from './HeaderNotice';
import HeaderAvatar from './HeaderAvatar';
import IMenu from '@/components/menu/menu';
import { mapState, mapMutations } from 'vuex';

export default {
	name: 'AdminHeader',
	components: { IMenu, HeaderAvatar, HeaderNotice, HeaderSearch },
	props: ['collapsed', 'menuData'],
	data() {
		return {
			langList: [
				{ key: 'CN', name: '简体中文', alias: '简体' },
				/*
				{ key: 'HK', name: '繁體中文', alias: '繁體' },
				{ key: 'US', name: 'English', alias: 'English' }*/
			],
			searchActive: true,
			isframe: false
		};
	},
	computed: {
		...mapState('setting', ['theme', 'isMobile', 'layout', 'systemName', 'lang', 'pageWidth']),
		headerTheme() {
			if (this.layout == 'side' && this.theme.mode == 'dark' && !this.isMobile) {
				return 'light';
			}
			return this.theme.mode;
		},
		langAlias() {
			let lang = this.langList.find(item => item.key == this.lang);
			return lang.alias;
		},
		menuWidth() {
			const { layout, searchActive } = this;
			const headWidth = layout === 'head' ? '100% - 188px' : '100%';
			const extraWidth = searchActive ? '600px' : '500px';
			return `calc(${headWidth} - ${extraWidth})`;
		}
	},

	methods: {
		toggleCollapse() {
			this.$emit('toggleCollapse');
		},
		onSelect(obj) {
			this.$emit('menuSelect', obj);
		},
		...mapMutations('setting', ['setLang'])
	}
};
</script>

<style lang="less" scoped>
@import 'index';
</style>
